<template>
  <div class="card-wrapper">
    <div class="card-header">
      <div class="card-title" @click="toServerUrl">{{ data.name }}</div>
      <div class="card-jump" @click="toServerUrl">
        <i class="el-icon-position"></i>
      </div>
    </div>
    <div class="card-content">
      <div class="content-line">
        <div class="line-title" @click="showWarningList">WARNING</div>
        <div class="line-number" @click="showWarningList">
          {{ data.warning }}
        </div>
      </div>
      <div class="content-line">
        <div class="line-title" @click="showCriticalList">CRITICAL</div>
        <div class="line-number" @click="showCriticalList">
          {{ data.critical }}
        </div>
      </div>
      <div class="content-fill"></div>
    </div>
    <div class="card-footer">
      <div class="footer-title">最新事件时间</div>
      <div class="footer-time">{{ data.lastestTime }}</div>
    </div>

    <el-dialog
      title="告警记录"
      :visible.sync="dialogVisible"
      width="1200px"
      class="table-dialog"
    >
      <el-table v-loading="loading" :data="list" border>
        <el-table-column label="序号" type="index" align="center" />
        <el-table-column
          label="实例名称"
          align="center"
          prop="instance"
          width="120px"
        />
        <el-table-column
          label="告警时间"
          align="center"
          prop="time"
          width="150px"
        />
        <el-table-column
          label="事件名称"
          align="center"
          prop="name"
          width="200px"
        />
        <el-table-column
          label="告警等级"
          align="center"
          prop="level"
          width="90px"
        >
          <template slot-scope="{ row }">
            <el-tag effect="dark" :type="getLevelType(row)">{{
              getLevelName(row)
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="Value"
          align="center"
          prop="value"
          width="80px"
        />
        <el-table-column
          label="告警信息"
          align="center"
          prop="log"
          resizable
          show-overflow-tooltip
        />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { fetchList, fetchDetailList } from "@/api/platform";
import { levelMap } from "@/utils/constant";

export default {
  props: {
    data: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      dialogVisible: false,
      list: [],
      loading: false,
    };
  },
  methods: {
    toServerUrl() {
      window.open(this.data.href);
    },
    showWarningList() {
      this.showDiaglog("Warning");
    },
    showCriticalList() {
      this.showDiaglog("Critical");
    },
    showDiaglog(type) {
      this.$emit('selectWarningList', this.data.configId, type)
      // this.list = [];
      // this.dialogVisible = true;
      // this.loading = true;
      // fetchDetailList({
      //   configId: this.data.configId,
      //   type,
      // }).then((res) => {
      //   this.list = res.data || [];
      //   this.loading = false;
      // });
    },
    getLevelName(row) {
      return levelMap[this.data.configType][row.level].label;
    },
    getLevelType(row) {
      return levelMap[this.data.configType][row.level].type;
    },
  },
};
</script>

<style scoped lang="scss">
.card-wrapper {
  display: flex;
  flex-direction: column;
  background-color: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  transition: 0.3s;
  flex: 1;
  // width: 480px;
  padding: 20px;
  .card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .card-title {
      color: rgb(64, 158, 255);
      font-weight: 700;
      cursor: pointer;
    }
    .card-jump {
      .el-icon-position {
        cursor: pointer;
      }
    }
  }
  .card-content {
    font-size: 20px;
    .content-line {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      .line-title {
        cursor: pointer;
      }
      .line-number {
        font-weight: 700;
        cursor: pointer;
      }
    }
    .content-fill {
      height: 20px;
    }
  }
  .card-footer {
    color: #999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 20px;
    border-top: 1px solid #f1f2f6;
  }
}

// MFO 风格
@import "~@/assets/styles/platform-variables.scss";
.card-wrapper {
  background-color: $--platform-color-primary;
  color: $--platform-color-font;
  border: none;
  .card-header {
    .card-title {
      color: $--platform-color-main-1;
    }
  }
  .card-footer {
    border-top: 1px solid $--platform-color-border;
  }
}
// 修改 element-ui dialog 和 table 样式
::v-deep .table-dialog {
  .el-dialog {
    background-color: $--platform-color-primary;
    .el-dialog__title {
      color: $--platform-color-font;
    }
  }

  // table 背景色
  .el-table {
    .el-table__cell {
      background-color: $--platform-color-primary;
    }
    .cell {
      color: $--platform-color-font;
    }
    .el-table__empty-block {
      background-color: $--platform-color-primary;
    }
  }
  // hover 颜色
  .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: #6f7573 !important;
  }

  // 边框颜色 Start
  .el-table--border:after,
  .el-table--group:after,
  .el-table:before {
    background-color: $--platform-color-border;
  }

  .el-table--border,
  .el-table--group {
    border-color: $--platform-color-border;
  }

  .el-table td,
  .el-table th.is-leaf {
    border-color: $--platform-color-border;
  }

  .el-table--border th,
  .el-table--border th.gutter:last-of-type {
    border-color: $--platform-color-border;
  }

  .el-table--border td,
  .el-table--border th {
    border-color: $--platform-color-border;
  }

  .el-button {
    background-color: $--platform-color-main-1;
    border: none;
  }
  // 边框颜色 END
}
</style>
